<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<anchored-heading :level="3">
				Hello world!
			</anchored-heading>
		</div>
		
		<script src="../../vue.js"></script>
		<script>
		    const app = Vue.createApp({})
		    
			function getChildrenTextContent(children) {
                return children
                    .map(node => {
                        return typeof node.children === 'string'
                            ? node.children
                            : Array.isArray(node.children)
                            ? getChildrenTextContent(node.children)
                            : ''
                    })
                    .join('')
            }

			app.component('anchored-heading', {
                render() {
                    // 从子节点的文本内容创建kebab-case 风格的 ID
                    const headingId = getChildrenTextContent(this.$slots.default())
                      .toLowerCase()
                      .replace(/\W+/g, '-')     // 将非单词字符替换为短划线
                      .replace(/(^-|-$)/g, '')  // 删除前导和尾随的短划线

                    console.log("headingId = ",headingId);
					
                    return Vue.h('h' + this.level, [
                        Vue.h(
                            'a',
                            {
                              name: headingId,
                              href: '#' + headingId
                            },
                            this.$slots.default()
                        )
                    ])
                },
                props: {
                    level: {
                      type: Number,
                      required: true
                    }
                }
            })
            app.mount('#app')
		</script>
	</body>
</html>